<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Flexbox 0 — starting code</title>
  <style>
    html {
      font-family: sans-serif;
    }

    body {
      margin: 0;
    }

    header {
      background: purple;
      height: 100px;
    }

    h1 {
      text-align: center;
      color: white;
      line-height: 100px;
      margin: 0;
    }

    article {
      padding: 10px;
      margin: 10px;
      background: aqua;
    }

    /* Add your flexbox CSS below here */
    section {
      /* 设置子节点布局 */
      display: flex;
      /* flex-direction: row; */
      /* flex-wrap:wrap; */
    }

    article {
      flex: 2;
    }

    article:nth-of-type(2) {
      flex: 1;
    }
  </style>
</head>

<body>
  <header>
    <h1>Sample flexbox example</h1>
  </header>

  <section>
    <article>
      <h2>First article</h2>

      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry
        vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid
        single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health
        goth gastropub hammock.</p>
    </article>

    <article>
      <h2>Second article</h2>

      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry
        vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid
        single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health
        goth gastropub hammock.</p>
    </article>

    <article>
      <h2>Third article</h2>

      <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry
        vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid
        single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health
        goth gastropub hammock.</p>

      <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit.
        Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid
        chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
    </article>
  </section>
</body>

</html>